<template>
  <div class="coursebox">
    <p>
      <router-link to="/">首页</router-link>
      <span style="margin: 0 10px">/</span>
      <span style="font-weight: bold;">课程</span>
    </p>
    <Title />
    <div class="content shadow">
      <h2>课程列表</h2>
      <div class="courses clearfix">
        <Course v-for="course of courses" :key="course.id"
          :course="course"
          @click.native="courseDetail(course)"
        />
      </div>
      <div class="pagebox" style="text-align: center;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="page.pageSize"
          @current-change="changePage"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import Title from '@/components/Title'
import Course from '@/components/Course'
import Api from '@/api'
export default {
  components: {
    Title,
    Course
  },
  data(){
    return {
      courses: [
        
      ],
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 12
      }
    }
  },
  mounted() {
    this.getCourses()
  },
  methods: {
    getCourses() {
      Api.courseListPage(this.page).then(res => {
        this.courses = res.data.rows || []
        this.total = res.data.total
      })
    },
    changePage(val) {
      this.page.pageNum = val
      this.getCourses()
    },
    courseDetail(course) {
      this.$router.push(`/course/${course.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.coursebox {
  padding-top: 40px;
  .content {
    padding: 20px;
    h2 {
      margin-bottom: 20px;
    }
    .courses {
        .course {
            float: left;
            margin-bottom: 20px;
            &:not(:nth-of-type(4n)) {
                margin-right: 20px;
            }
        }
    }
  }
}
</style>